import React, { Component } from 'react'

import Loading from '@/base/loading/loading'
import MmNav from '@/components/mm-nav/mm-nav'
import Scroll from '@/base/scroll/scroll'

import { HTTP_OK } from '@/config'
import { getTopListDetail } from '@/api'

import './toplist.scss'

// 排行榜页面

class TopList extends Component {
    constructor(props) {
        super(props)
        this.state = {
            officialList: [],
            globalList: [],
            artistList: null
        }
    }

    componentDidMount() {
        getTopListDetail().then(res => {
            if (res.data.code === HTTP_OK) {
                // console.log(res.data.list)
                let officialList = [],
                    globalList = [],
                    artistList = res.data.artistToplist
                res.data.list.forEach(item => {
                    if (item.ToplistType) {
                        officialList.push({
                            id: item.id,
                            name: item.name,
                            coverImgUrl: item.coverImgUrl,
                            description: item.description,
                            updateFrequency: item.updateFrequency,
                            tracks: item.tracks,
                            ToplistType: item.ToplistType
                        })
                    } else {
                        globalList.push({
                            id: item.id,
                            name: item.name,
                            coverImgUrl: item.coverImgUrl,
                            description: item.description,
                            updateFrequency: item.updateFrequency
                        })
                    }
                })
                this.setState({
                    officialList,
                    globalList,
                    artistList
                })
            }
        })
    }

    render() {
        const { officialList, globalList, artistList } = this.state
        // console.log(artistList)
        return (
            <div className="mm-wrapper toplist">
                <MmNav title="排行榜" />
                {officialList.length > 0 ? (
                    <Scroll className="mm-content">
                        <h1 className="toplist-title">官方榜单</h1>
                        <div className="row-list">
                            {officialList.map(item => (
                                <div
                                    className="row-item"
                                    onClick={() => {
                                        this.props.history.push({
                                            pathname: `${router_prefix}/playlist/${item.id}`
                                        })
                                    }}
                                    key={item.id}
                                >
                                    <div className="item-hd">
                                        <img src={`${item.coverImgUrl}?param=150y150`} alt="" />
                                        <p>{item.updateFrequency}</p>
                                    </div>
                                    <div className="row-item-bd">
                                        {item.tracks.map((tracks, index) => (
                                            <p
                                                key={`${item.id}${index}`}
                                            >{`${index + 1}. ${tracks.first}-${tracks.second}`}</p>
                                        ))}
                                    </div>
                                </div>
                            ))}
                            {artistList && artistList.name && (
                                <div className="row-item">
                                    <div className="item-hd">
                                        <img src={`${artistList.coverUrl}?param=150y150`} alt="" />
                                        <p>{artistList.updateFrequency}</p>
                                    </div>
                                    <div className="row-item-bd">
                                        {artistList.artists.map((item, index) => (
                                            <p
                                                key={`${item.third}${index}`}
                                            >{`${index+1}. ${item.first}`}</p>
                                        ))}
                                    </div>
                                    {/*${item.third}*/}
                                </div>
                            )}
                        </div>
                        <h1 className="toplist-title">全球榜</h1>
                        <div className="column-wrapper">
                            {globalList.map(item => (
                                <div
                                    className="column-item"
                                    onClick={() => {
                                        this.props.history.push({
                                            pathname: `${router_prefix}/playlist/${item.id}`
                                        })
                                    }}
                                    key={item.id}
                                >
                                    <div className="column-img">
                                        <img src={`${item.coverImgUrl}?param=150y150`} alt="" />
                                        <p>{item.updateFrequency}</p>
                                    </div>
                                    <div className="column-title">{item.name}</div>
                                </div>
                            ))}
                        </div>
                    </Scroll>
                ) : (
                    <Loading />
                )}
            </div>
        )
    }
}

export default TopList
